<template>
<div class="head_wrap">


  <div class="head">
    <div class="logo">
      <router-link :to="{name:'Home'}">
        <img src="../assets/logo-full.png" alt />
      </router-link>
    </div>
    <router-link :to="{name:'Form'}">表单</router-link>
    <div class="entry">
      <template v-if="!userinfo">
        <router-link :to="{name:'Login',query:{query:$route.fullPath}}">登陆</router-link>
        <router-link :to="{name:'Register',query:{query:$route.fullPath}}">注册</router-link>
      </template>
      <template v-else>
        <a href="#">
          欢迎，
          <span class="logined" style="color: goldenrod;font-weight: 900;">{{userTel}}</span>
        </a>
        <a href="#">
          <span class="logout" @click="logout">退出</span>
        </a>
      </template>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: "HeaderNav",
  computed: {
    userinfo() {
      return this.$store.state.userinfo;
    },
    userTel() {
      let userinfo = this.$store.state.userinfo;
      return userinfo ? userinfo.tel : "";
    }
  },
  methods: {
    async logout() {
      await this.$api.logout({});
      this.$store.commit("setUserInfo", ""); //清除用户登录信息
      if (this.$route.meta && this.$route.meta.requireAuth) {
        this.$router.push({
          name: "Login",
          query: {
            query: this.$route.query.query || ""
          }
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.head_wrap{
background: #649efd;
}
.head {
  width: 1200px;
  margin: 0 auto;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  
   a{
      color: #fff;
    }
  .logo {
   
    width: 240px;
    height: 32px;
    a {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .entry {
    height: 50px;
    line-height: 50px;
    a {
      display: inline-block;
      margin: 0 10px;
      text-align: center;
      color: #fff;
    }
  }
}
</style>
